import React, { useEffect, useState } from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';
// 路由没有研究明白 QaQ
// import { useNavigation } from '@react-navigation/native';
// import { StackNavigationProp } from '@react-navigation/stack';

import ClassView from './src/components/ClassView'
import FuncView from './src/components/FuncView';
import TextView from './src/pages/currency/TextView';
import ImageDemo from './src/pages/currency/ImageDemo';
import ImageBackgroundDemo from './src/pages/currency/ImageBackgroundDemo';
import TextInputDemo from './src/pages/currency/TextInputDemo';
import TouchableOpacityDemo from './src/pages/currency/TouchableDemo';
import PressableDemo from './src/pages/currency/PressableDemo';
import ScrollViewDemo from './src/pages/currency/ScrollViewDemo';
import FlatListDemo from './src/pages/currency/FlatListDemo';
import SectionListDemo from './src/pages/currency/SectionListDemo';
import SwitchDemo from './src/pages/currency/SwitchDemo';
import ModalDemo from './src/pages/currency/ModalDemo';
import ApiDemo from './src/pages/currency/ApiDemo'
import Animated_01 from './src/pages/animated/Animated_01'
import Animated_02 from './src/pages/animated/Animated_02'
import Animated_03 from './src/pages/animated/Animated_03'
import TsDemo from './src/pages/currency/TsDemo'
import RootView from './src/pages/context/RootView'
import InfoView from './src/pages/hoc/InfoView'
import MemoView from './src/pages/memo/MemoView'
import RefDemo from './src/pages/ref/RefDemo'
import NativePage from './src/pages/native/NativePage'


function App(): JSX.Element {

  const [show, setShow] = useState(true)
  const changeShow = () => {
    setShow(!show)
  }

  useEffect(() => {
  }, [])

  // 路由没有研究明白 QaQ
  // const navigation = useNavigation<StackNavigationProp<any>>()
  // const toTextView = () => {
  //   // navigation.push('TextView')
  // }




  return (
    <SafeAreaView >
      <StatusBar
        barStyle={'light-content'}
        backgroundColor={'#fff'}
      />

      <View style={styles.container}  >
        {/* 
        1. 测试函数和类组件
        <Button
          onPress={changeShow}
          title="click me"
          color="#41c4f8"
        />
        {
          show ? <FuncView show={show} /> : <ClassView name="theshy" />
        } 
        */}

        {/* 2. 系统学习rn的基础组件 */}
        {/* <TextView/> */}
        {/* <ImageDemo/> */}
        {/* <ImageBackgroundDemo/> */}
        {/* <TextInputDemo/> */}
        {/* <TouchableOpacityDemo/> */}
        {/* <PressableDemo/> */}
        {/* <ScrollViewDemo/> */}
        {/* <FlatListDemo/> */}
        {/* <SectionListDemo/> */}
        {/* <SwitchDemo/> */}
        {/* <ModalDemo/> */}

        {/* 3. 学习api */}
        {/* <ApiDemo/> */}

        {/* 4. 学习rn的动画 */}
        {/* <Animated_01/> */}
        {/* <Animated_02/> */}
        {/* <Animated_03/> */}

        {/* 5. 测试一下ts */}
        {/* <TsDemo/> */}

        {/* 6. context 组件通信 */}
        {/* <RootView /> */}

        {/* 7. 高阶组件 */}
        {/* <InfoView /> */}

        {/* 8. memo优化组件 */}
        {/* <MemoView /> */}

        {/* 9. ref转发 */}
        {/* <RefDemo/> */}

        {/* 10. 原生方法 */}
        <NativePage/>

      </View>

    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    flexDirection: 'column',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

export default App;
